<template>
    <view>
        <view>
            <nav-bar :title="'服务点'"></nav-bar>
        </view>

        <!-- 主体 -->
        <view class="container-box">
            <view class="shop shop2">
                <view v-if="shop_list.length > 0" style="background-color: #F5F5F5;">
                    <view class="shop-list-box" v-for="(shopItem,shopIndex) in shop_list" :key="shopIndex"
                        @click="toMap(shopItem)">
                        <view class="shop-list-left" :style="bg">
                            <view>
                                <image class="shop-list-left-image" :src="shopItem.cover"></image>
                                <image class="shop-list-left-top" :src="yx_src"></image>
                            </view>
                            <view class="shop-list-right">
                                <view class="shop-list-right-title">
                                    <text class="shop-list-right-title-text">{{shopItem.service_name}}</text>
                                </view>
                                <view class="mt6 tag-box">
                                    <view class="" @click.stop="makePhone(shopItem.phone)">
                                        <image class="phone-image" :src="dianhua"></image>
                                    </view>
                                </view>
                                <view class="mt6 shop-list-right-text2">
                                    <view style="display: flex;align-items: center">
                                        <image class="business-box-image" :src="dizhi"></image>
                                        <text class="shop-list-right-text3"
                                            style="margin-right: 0;font-size: 22rpx;">{{shopItem.address ?shopItem.address :''}}</text>
                                    </view>
                                    <text class="shop-list-right-text4"
                                        style="font-size: 22rpx;">{{shopItem.distance}}Km</text>
                                </view>
                            </view>
                        </view>
                        <u-line margin="0 0 1rpx 0" color="#999" />
                    </view>
                </view>
                <view v-else>
                    <u-empty mode="list"></u-empty>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    var config = 'http://test.com'
    export default {
        components: {},
        data() {
            return {
                scrollTop: 0,
                showPop: false,
                title: '',
                right: false,
                background: {
                    'background-color': '#aba2af'
                },
                page: 1,
                last_page: 1,
                shop_list: [],
                yx_src: '/static/img/myhome/youxuan.png',
                dizhi: '/static/img/myhome/dizhi.png',
                dianhua: '/static/img/myhome/shop_phone.png',
                customStyle: {
                    'margin-top': "15rpx",
                    'font-size': "22rpx",
                },
                order: 1,
                bg: 'background: url(' + '/static/img/myhome/' +
                    'kuang.png);background-size:100% 100%;background-repeat:no-repeat;background-color: #ffffff;',
                longitude: '',
                latitude: ''
            };
        },
        mounted() {
            const query = uni.createSelectorQuery();
            query.in(this).select('.main').boundingClientRect();
            query.exec((res) => {
                this.height = uni.getSystemInfoSync().windowHeight - res[0].top - uni.upx2px(120);
            })
            this.init()
        },

        onPullDownRefresh() {
            this.init()
            uni.stopPullDownRefresh();
        },
        methods: {
            init() {
                this.page = 1
                this.last_page = 1
                this.shop_list = []
                this.getLocat()
            },
            // 获取位置信息
            getLocat() {
                // 腾讯地图Api
                uni.getLocation({
                    type: 'wgs84',
                    success: (res) => {
                        this.longitude = res.longitude
                        this.latitude = res.latitude
                        this.getShopList()
                    }
                });
            },
            getShopList() {
                this.$u.api.getServicePointList({
                    page: this.page,
                    latitude: this.latitude,
                    longitude: this.longitude
                }).then(res => {
                    this.last_page = res.last_page
                    if (this.page == 1) {
                        this.shop_list = res.data
                    } else {
                        this.shop_list = this.shop_list.concat(res.data)
                    }
                })
            },
            getMore() {
                if (this.page < this.last_page) {
                    this.page++
                    this.getShopList()
                }
            },
            makePhone(phone) {
                uni.makePhoneCall({
                    phoneNumber: phone
                });
            },
            toMap(shopItem) {
                uni.openLocation({
                    latitude: Number(shopItem.latitude),
                    longitude: Number(shopItem.longitude),
                    success: function() {
                    },
                    fail: function(e) {
                    },
                });
            }
        }
    };
</script>

<style>
    page {
        background-color: #F5F5F5;
    }

    .u-back-top {
        right: 16rpx !important;
    }

    .u-input__input {
        min-width: 60rpx;
        max-width: 118rpx;
    }

    .u-input__right-icon__item {
        margin-left: 0rpx !important;
        margin-top: -4rpx !important;
    }

    .u-tag {
        max-width: 160rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
</style>
<style lang="scss" scoped>
    .city {
        margin-left: 20rpx;
        margin-right: 25rpx;
    }

    .ml36 {
        margin-left: 36rpx !important;
    }

    .mr36 {
        margin-right: 36rpx !important;
    }

    .ml2 {
        margin-left: 2rpx;
    }

    .pr {
        position: relative
    }

    .df {
        display: flex;
    }

    .position-item {
        position: absolute;
        left: 36rpx;
        top: 38rpx;
        z-index: 999;
        width: 90%;
    }

    .city-item {
        display: inline-block;
        float: left;
    }

    .city-name {
        font-size: 28rpx;
        font-weight: bold;
        color: #FFFFFF;
    }

    .city-select {
        height: 10rpx;
        width: 16rpx;
        margin-left: 22rpx;
    }

    .search-box {
        position: absolute;
        bottom: -50rpx;
        height: 86rpx;
        margin-left: 30rpx;
        margin-right: 30rpx;
        margin-top: 10rpx;
        background-color: #FFFFFF;
        display: flex;
        align-items: center;
    }

    .search {
        width: 666rpx;
        margin-left: 15rpx;
        margin-right: 15rpx;
    }

    .search-btn {
        height: 38rpx;
        width: 32rpx;
        float: right;
    }

    .container-box {
        // background-color: #606266;
        // width: 92%;
        // margin-left: 30rpx;
        // margin-top: 22rpx;
        margin-bottom: 80rpx
    }

    .notice {
        background: #FFFFFF;
        height: 86rpx;
        display: flex;
        align-items: center;
        justify-content: space-between,
    }

    .notice-btn {
        width: 60rpx;
        height: 68rpx;
        margin-top: 20rpx;
    }

    .notice-help {
        font-size: 26rpx;
        font-weight: 500;
        color: #5B79FB;
        margin-right: 24rpx;
    }

    .notice-text {
        display: flex;
        align-items: center;
        // margin-left: -110rpx
    }

    .notice-text1 {
        display: flex;
        align-items: center;
    }

    .notice-text2 {
        display: flex;
        align-items: center;
        margin-left: 20rpx;
    }



    .navi {
        background: #FFFFFF;
        margin-top: 70rpx;
    }

    .navi-icon {
        width: 66rpx;
        height: 66rpx;
    }

    .grid-text {
        font-size: 24rpx;
        margin-top: 12rpx;
        color: #333333;
        width: 120rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin-left: 25rpx;
    }

    .swiper {
        margin-bottom: 20rpx;
    }

    .swiper-item {
        margin-top: 10rpx
    }

    .indicator-dots {
        display: flex;
        justify-content: center;
        align-items: center;
        padding-bottom: 15rpx;
    }

    .indicator-dots-item {
        background-color: $u-tips-color;
        height: 6px;
        width: 6px;
        border-radius: 10px;
        margin: 0 3px;
    }

    .indicator-dots-active {
        background-color: $u-type-primary;
    }

    .shop {
        background-color: #FFFFFF;
        height: auto;
        // margin-top: 18rpx;
        padding-bottom: 1rpx;
    }

    .tuijian-icon {
        width: 162rpx;
        height: 32rpx;
        margin-top: 26rpx;
        margin-bottom: 10rpx;
        margin-left: 28rpx;
    }

    .first-shop-item {
        position: relative;
        display: flex;
        justify-content: center;
    }

    .first-shop-icon {
        width: 630rpx;
        height: 304rpx;
    }

    .first-shop-tuijian {
        width: 62rpx;
        height: 46rpx;
        position: absolute;
        top: 0;
        right: 31.5rpx;
    }

    .first-shop-name {
        position: absolute;
        top: 70%;
        font-size: 30rpx;
        font-family: PingFang SC;
        font-weight: bold;
        color: #FFFFFF;
        line-height: 42px
    }

    .second-shop-item {
        display: flex;
        margin-top: 18rpx;
        margin-bottom: 24rpx;
        justify-content: space-between;
        position: relative;
        margin-left: 32rpx;
        width: 90.5%;
    }

    .second-shop-item2 {
        margin-top: 6rpx;
    }

    .second-shop-box {
        display: flex;
        justify-content: center
    }

    .second-shop-image {
        width: 306rpx;
        height: 234rpx;
    }

    .mg-left-18 {
        margin-left: 18rpx;
    }

    .second-shop-rl {
        right: 0;
        left: 244rpx;
    }

    .second-shop-r {
        width: 62rpx;
        height: 46rpx;
        position: absolute;
        top: 0;
        right: 0;
    }

    .df {
        display: flex !important;
    }

    .left-box {
        display: flex;
        flex-direction: column;
        margin-left: 32rpx;
    }

    .left-box-h {
        height: 210rpx;
    }

    .left-box-text {
        position: absolute;
        top: 30rpx;
        left: 22rpx;
        font-size: 32rpx;
        font-family: PingFang SC;
        font-weight: bold;
        color: #FFFFFF;
        line-height: 42rpx;
    }

    .left-box-text2 {
        position: absolute;
        top: 80rpx;
        left: 22rpx;
        font-size: 22rpx;
        color: #FFFFFF;
        line-height: 42rpx;
        border: 2rpx solid #FFFFFF;
        border-radius: 18rpx;
        width: 120rpx;
        text-align: center;
    }

    .left-box-text3 {
        position: absolute;
        top: 30rpx;
        left: 22rpx;
        font-size: 32rpx;
        font-family: PingFang SC;
        font-weight: bold;
        color: #FFFFFF;
        line-height: 42rpx;
    }

    .left-box-text4 {
        position: absolute;
        top: 80rpx;
        left: 22rpx;
        font-size: 22rpx;
        color: #FFFFFF;
        line-height: 42rpx;
        border: 2rpx solid #FFFFFF;
        border-radius: 18rpx;
        width: 120rpx;
        text-align: center;
    }

    .right-box {
        margin-left: 18rpx;
        position: relative;
    }

    .right-image {
        width: 306rpx;
        height: 438rpx;
    }

    .right-box-text {
        position: absolute;
        top: 30rpx;
        left: 22rpx;
        font-size: 32rpx;
        font-family: PingFang SC;
        font-weight: bold;
        color: #FFFFFF;
        line-height: 42rpx;
    }

    .right-box-text1 {
        position: absolute;
        top: 80rpx;
        left: 22rpx;
        font-size: 22rpx;
        color: #FFFFFF;
        line-height: 42rpx;
        border: 2rpx solid #FFFFFF;
        border-radius: 18rpx;
        width: 120rpx;
        text-align: center;
    }

    .shop2 {
        // padding-bottom: 14rpx !important;
    }

    .news {
        display: flex;
        background-color: #FFFFFF;
        margin-top: 18rpx;
        overflow: hidden;
        align-items: center;
        padding-bottom: 10rpx;
    }

    .news-image-box {
        display: flex;
        justify-content: center;
        width: 25%;
        margin-top: 12rpx;
        // margin-left: 12rpx;
    }

    .news-image {
        width: 118rpx;
        height: 40rpx;
    }

    .news-image-btn {
        width: 154rpx;
        height: 48rpx;
    }

    .news-item {
        width: 100%;
        margin-top: 12rpx;
        margin-left: 16rpx;
    }

    .shop-list-title {
        display: flex;
        justify-content: space-between;
    }

    .shop-list-title-more {
        font-size: 24rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: #999999;
        line-height: 42px;
        margin-right: 38rpx;
    }

    .shop-list-tag {
        display: flex;
        justify-content: space-around;
        margin-top: 6rpx;
        margin-bottom: 6rpx;
    }

    .shop-list-box {
        margin-top: 18rpx;
        position: relative;
        background-color: #ffffff;
    }

    .shop-list-left {
        height: 180rpx;
        border-bottom: #000000;
        position: relative;
        display: flex;
    }

    .shop-list-left-image {
        width: 150rpx;
        height: 150rpx;
        margin-left: 16rpx;
        margin-top: 14rpx;
        border-radius: 10rpx;
    }

    .shop-list-left-top {
        width: 76rpx;
        height: 34rpx;
        position: absolute;
        top: 0;
        left: 0;
    }

    .shop-list-right {
        margin-left: 32rpx;
        margin-top: 14rpx;
        width: 68%;
    }

    .shop-list-right-title {
        display: flex;
        align-items: center;
    }

    .shop-list-right-title-text {
        font-size: 30rpx;
        color: #000000;
        line-height: 42rpx;
        font-weight: bold;
    }

    .shop-list-right-title-tag {
        width: 32rpx;
        height: 32rpx;
        margin-left: 5rpx;
    }

    .mt6 {
        margin-top: 14rpx;
    }

    .shop-list-right-text1 {
        font-size: 24rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: #666666;
    }

    .shop-list-right-text2 {
        font-size: 24rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: #666666;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .shop-list-right-text3 {
        width: 350rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin-right: 10rpx;
    }

    .shop-list-right-text4 {
        // margin-right: 20rpx;
        // overflow: hidden;
        // text-overflow: ellipsis;
        // white-space: nowrap;
        // width: 140rpx;
    }

    .business-box {
        display: flex;
        align-items: center;
        font-size: 20rpx;
        margin-right: 20rpx;
    }

    .ml60 {
        margin-left: 60rpx;
    }

    .business-box-image {
        width: 26rpx;
        height: 26rpx;
    }

    .business-box-text {
        margin-left: 4rpx;
    }

    .tag-box {
        margin-top: 8rpx;
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }

    .phone-image {
        width: 30rpx;
        height: 30rpx;
    }
</style>
